<template>
  <div id="settingPerson" :style="`font-size:`+subjectFont">
      <div id="selections" v-show="true">
          <van-tabs :class="isDark?'Dark':''" :color="subjectColor" >
            <van-tab  title="修改昵称" name="1">
              <van-form>
                <van-field
                  name="修改昵称"
                  label="修改昵称"
                  placeholder="请修改昵称"
                  v-model="nickName"
                />
                <div style="margin: 16px;">
                  <van-button round block type="info" @click="changeNickName">提交</van-button>
                </div>
              </van-form>
            </van-tab >
            <van-tab   title="修改简历" name="2">
              <van-field
                v-model="brief"
                rows="2"
                autosize
                label="修改简介"
                type="textarea"
                maxlength="35"
                placeholder="请输入简介"
                show-word-limit
              />
              <div style="margin: 16px;">
                <van-button round block type="info" @click="changeBrief">提交</van-button>
              </div>
            </van-tab >
            <van-tab   title="修改头像" name="3"> 
              <div class="upload">
                <img class="setimg" src="" ref="temporaryAvatar">
                <input class="setimgBtn setimgBtn-active" ref="avatar" name="file" type="file" @change="changeAvatar">
              </div>
              <div id="background">
                <span>点击上传头像</span>
              </div>
            </van-tab >
            <van-tab   title="修改密码" name="4">
              <van-form>
                <van-field
                  name="修改密码"
                  label="修改密码"
                  placeholder="请输入密码"
                  v-model="pA"
                />
                <van-field
                  name="验证密码"
                  label="验证密码"
                  placeholder="请再次输入密码"
                  v-model="pB"
                />
                <div style="margin: 16px;">
                  <van-button round block type="info" @click="changPassword">提交</van-button>
                </div>
              </van-form>
            </van-tab >
          </van-tabs>
      </div>
  </div>
</template>

<script>
import Vue from "vue";
import { mapState } from 'vuex'
import { Message,Loading } from 'element-ui'
import { Person } from '../../api/Person'
import { Tab, Tabs , Form , Field} from "vant";
import "vant/lib/index.css";

Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Form);
Vue.use(Field);

export default {
  name:'settingPerson',
  data() {
    return {
      activeName:'1',
      setItem:[
        {name:'修改昵称'},
        {name:'修改简介'},
        {name:'修改头像'},
        {name:'修改密码'}
      ],
      nickName:"",
      brief:"",
      pA:'',
      pB:'',
    }
  },
  computed:{
         ...mapState(['subjectFont','isDark','subjectColor'])
    },
    mounted(){
        
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      changeNickName(){
        let loadingInstance = Loading.service({ fullscreen: true });
        if(this.nickName){
          Person({
            method:'post',
            url:'/setNickName',
            data:{
              nickName:this.nickName
            }
          }).then(res=>{
            console.log(res)
            
            this.$store.commit('Reflesh',true)
          }).then(()=>{
            Message({
              showClose: true,
              message: '修改成功',
              type: 'success'
            })
            loadingInstance.close();
          }).catch(err=>{
            console.log(err)
          })
        }
      },
      changeBrief(){
        let loadingInstance = Loading.service({ fullscreen: true });
        if(this.brief){
          Person({
            method:'post',
            url:'/setBrief',
            data:{
              brief:this.brief
            }
          }).then(res=>{
            console.log(res)
            this.$store.commit('Reflesh',true)
          }).then(()=>{
            Message({
              showClose: true,
              message: '修改成功',
              type: 'success'
            })
            loadingInstance.close();
          }).catch(err=>{
            console.log(err)
          })
        }
      },
      checkPassWord(){
            let strA = this.pA;
            let strB = this.pB;
            // 密码必须由 8-64位字母、数字、特殊符号组成
            var reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\\/]).{8,64}$/;
            //对密码进行判断 是否相等 是否长度大于6 是否包含数字和英文和特殊字符
            if(strA === strB){
                let str = strA;
                if(str.length>=6&&reg.test(str)){
                    this.changPassword()
                }else{
                    Message({
                        showClose: true,
                        message: '密码需要长度大于6，且包含数字、英文和字符',
                        type: 'warning'
                    });
                    return false;
                }
            }else{
                Message({
                    showClose: true,
                    message: '两次密码不一致',
                    type: 'warning'
                });
                return false;
            }
      },
      changPassword(){
        let loadingInstance = Loading.service({ fullscreen: true });
        let data = {newPassword:this.pA}
          Person({
            method:'get',
            url:'/setPassword',
            params:data
          })  
          .then(res=>{
            console.log(res)
            this.$store.commit('Reflesh',true)
          }).then(()=>{
            Message({
              showClose: true,
              message: '修改成功',
              type: 'success'
            })
            loadingInstance.close();
          }).catch(err=>{
            console.log(err)
          })
      },
      async changeAvatar(){
        let form = new FormData();
        form.append('image',this.$refs.avatar.files[0])
        form.append('key','ec70c987b7ac71b8666af5e6c602a20f')
        Loading.service({ fullscreen: true });
        this.$axios.post('https://api.imgbb.com/1/upload',form,{
          headers:{
            "Content-Type":"multipart/form-data",
          }
        })
        .then(res=>{
          console.log(res)
          const url = res.data.data.url;
          return url
        }).then((url)=>{
          this.avatarSubmit(url)
        }).catch(err=>{
          console.log(err)
        })
      },
      avatarSubmit(urls){
        this.$refs.temporaryAvatar.src = urls
        Person({
            method:'post',
            url:'/setAvatar',
            data:{
              avatar:urls
            }
          })  
        .then(res=>{
          console.log(res)
          this.$store.commit('Reflesh',true)
        }).then(()=>{
          let loadingInstance = Loading.service();
          Message({
              showClose: true,
              message: '上传成功',
              type: 'success'
            })
          loadingInstance.close();
        }).catch(err=>{
          console.log(err)
        })
      }
    }
}
</script>

<style scoped lang="less">
  #selections{
    width: 100%;
  }
  input,textarea{
    width: 90%;
    height: 45px;
    border: 1px solid #999;
    border-radius: 10px;    
    display: block;
    margin: 10px auto;
  } 
  textarea{
    height: 120px;
    padding: 10px;
  }
  /deep/.el-tab-pane{
    position: relative;
    button{
      display: block;
      margin: 10px ;
      float:right;
    }
  }
  .upload{
      width: 100px;
      height: 100px;
      border: 1px solid #eee;
      overflow: hidden;
      position: relative;
      border-radius: 50%;
      margin: 0 auto;
  }

  .upload input[name="file"]{
      width: 100%;
      height: 100%;
      position:absolute;
      padding-top: 0px;
      z-index: 9;
      left: 0px;
      opacity: 0;
      top:0px
  }
  .setimg{
      width: 100%;
      height: 100%;
  }
  #background {
      content: ' ';
      display: block;
      width: 102px;
      height: 102px;
      border: 1px solid #eee;
      overflow: hidden;
      position: absolute;
      top: 43px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 50%;
      background-color: black;
      opacity: 0.5;
      z-index: 1;
      justify-content: space-around;
      text-align: center;
      span{
        font-size: 12px;
        line-height: 100px;
        margin: 10px;
        color: #fff;
      }
  }
  button{
    float: right!important;
    margin: 10px;
  }
  .Dark{
  background-color: rgb(52,55,64)!important;
  /deep/.van-tabs__nav{
    background-color: rgb(52,55,64)!important;
  }
  /deep/.van-tab span{
    color: #fff;
  }
  /deep/.van-tabs__line{
    background: #fff!important;
  }
}
</style>